.root {
    width: 375px;
    :global {
      .channel-header {
        position: relative;
        height: 44px;
        padding: 13px 0;
  
        .icon {
          position: absolute;
          right: 16px;
          width: 18px;
          height: 18px;
        }
      }
  
      .channel-content {
        padding: 0 16px;
  
        .channel-item {
          margin-bottom: 16px;
  
          &.edit {
            .channel-item-edit {
              color: #fff;
              background-color: #de644b;
            }
            .icon {
              display: block;
            }
          }
        }
  
        .channel-item-header {
          position: relative;
          height: 22px;
          line-height: 22px;
          margin-bottom: 22px;
  
          .channel-item-title {
            margin-right: 10px;
            font-size: 17px;
            color: #333;
            font-weight: 500;
          }
  
          .channel-item-title-extra {
            font-size: 12px;
            color: #a5a6ab;
          }
  
          .channel-item-edit {
            display: inline-block;
            position: absolute;
            right: 0;
            width: 52px;
            height: 22px;
            line-height: 21px;
            border: 1px solid #de644b;
            border-radius: 12px;
            color: #de644b;
            text-align: center;
            font-size: 12px;
          }
        }
  
        .channel-list {
          &-item {
            position: relative;
            display: inline-block;
            padding: 10px 23px;
            margin-right: 13px;
            margin-bottom: 16px;
            border-radius: 18px;
            color: #3a3948;
            font-size: 14px;
            background-color: #f7f8fa;
  
            .icon {
              display: none;
              position: absolute;
              top: -5px;
              right: 0;
            }
          }
  
          &-item.selected {
            color: #fc6627;
          }
        }
      }
    }
  }